import React from 'react'
import { Layout, Dropdown, Menu, Avatar } from 'antd';
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux';

import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';
const { Header } = Layout;


function TopHeader(props) {
  // const [collapsed, setCollapsed] = useState(false)
  const { role: { roleName }, username } = JSON.parse(localStorage.getItem("token"))
  const menu = (
    <Menu >
      <Menu.Item key="1" >
        {roleName}
      </Menu.Item>

      <Menu.Item danger onClick={() => {
        localStorage.removeItem("token")

        props.history.replace("/login")
      }}
      key="2">
        退出
      </Menu.Item>
    </Menu>
  );
  const changeCollapsed = () => {
    props.changeCollapsed()
  }
  return (

    <Header className="site-layout-background" style={{ padding: '0px 16px' }}>

      {
        props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed} /> : <MenuFoldOutlined onClick={changeCollapsed} />
      }
      <div style={{ float: 'right' }}>
        <span>欢迎
          <span style={{ color: '#1890ff' }}>
            {username}
          </span>回来
        </span>
        <Dropdown overlay={menu}>
          <Avatar icon={<UserOutlined />} />
        </Dropdown>
      </div>

    </Header>

  )

}

const mapStateToProps=({CollapsedReducer:{isCollapsed}})=>{
  // console.log(isCollapsed)
  return { 
    
    isCollapsed
  }
}
const mapDispatchToProps={
  changeCollapsed(){
    return {
      type:"change_collapsed"
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(TopHeader))